<script setup></script>

<template>
  <div class="px-[40px]">
    <div class="title font-bold mobile:hidden">
      <h1 class="text-[50px] font-bold">一级菜单文案</h1>
      <!-- 精选文章 -->
      <div class="article mt-[30px]">
        <h2 class="article_title text-[#00e1ff] text-3xl">精选文章</h2>
        <ul class="article_content mt-[30px] flex flex-wrap">
          <li
            class="h-[80px] flex justify-between items-center text-2xl text-[#333] border-b-[1px] cursor-pointer"
            v-for="i in 9"
          >
            <div>我需要多少存储空间？</div>
            <div><i class="pi pi-arrow-right" style=""></i></div>
          </li>
        </ul>
      </div>

      <!-- 左侧菜单内容 -->
      <!-- 一级菜单 -->
      <div class="menu_article mt-[70px]">
        <h2
          class="article_title text-[#00e1ff] text-3xl border-b-[1px] pb-[20px]"
        >
          一级菜单文案
        </h2>
        <div class="menu_content">
          <div class="">
            <Accordion>
              <AccordionTab header="二级菜单文案">
                <p class="text-[#666] leading-8" v-for="i in 6">
                  我需要多少存储空间？
                </p>
              </AccordionTab>
              <AccordionTab header="二级菜单文案">
                <p class="text-[#666] leading-8" v-for="i in 6">
                  我需要多少存储空间？
                </p>
              </AccordionTab>
              <AccordionTab header="二级菜单文案">
                <p class="text-[#666] leading-8" v-for="i in 6">
                  我需要多少存储空间？
                </p>
              </AccordionTab>
            </Accordion>
          </div>
        </div>
      </div>
      <!-- 二级菜单 -->
      <!-- <div class="menu_article mt-[70px]">
      <h2
        class="article_title text-[#00e1ff] text-3xl border-b-[1px] pb-[20px]"
      >
        二级菜单文案：所有文章
      </h2>
      <div class="menu_content mt-[30px]">
        <div class="">
          <p
            v-for="i in 10"
            class="leading-10 hover:text-[#00e1ff] hover:underline hover:underline-offset-4 cursor-pointer"
          >
            我需要多少存储空间？
          </p>
        </div>
      </div>
    </div> -->
    </div>
    <div class="pc:hidden">
      <h1 class="text-[50px] font-bold">一级菜单文案</h1>
      <div class="articl mt-[30px]">
        <Article />
      </div>
      <div class="menu_article mt-[70px]">
        <h2
          class="article_title font-bold text-[#00e1ff] text-3xl border-b-[1px] pb-[20px]"
        >
          一级菜单文案
        </h2>
        <div class="menu_content">
          <div class="">
            <Accordion>
              <AccordionTab header="二级菜单文案">
                <p class="text-[#666] leading-8" v-for="i in 6">
                  我需要多少存储空间？
                </p>
              </AccordionTab>
              <AccordionTab header="二级菜单文案">
                <p class="text-[#666] leading-8" v-for="i in 6">
                  我需要多少存储空间？
                </p>
              </AccordionTab>
              <AccordionTab header="二级菜单文案">
                <p class="text-[#666] leading-8" v-for="i in 6">
                  我需要多少存储空间？
                </p>
              </AccordionTab>
            </Accordion>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.article_content {
  li {
    width: 45%;
    &:nth-child(odd) {
      margin-right: 40px;
    }
  }
}
</style>
